<template>
    <div>
        <div class="systemtitle">
            <span>系统通知管理</span>
            <el-button class="addsystem" type="primary" @click="addSystem()">发布通知</el-button>
        </div>
        <div>
            <el-table :data="systems.slice((currentPage - 1) * pageSize, currentPage * pageSize)">
                <el-table-column prop="system_id" label="通知编号"></el-table-column>
                <el-table-column prop="uid" label="通知用户"></el-table-column>
                <el-table-column prop="content" label="通知内容"></el-table-column>
                <el-table-column prop="type" label="通知类型"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="handleSystem(scope.row.system_id)">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog width="38%" title="添加景点" :visible.sync="systemVisible" append-to-body>
                <el-form :model="form">
                    <el-form-item label="发布内容:" :label-width="formLabelWidth">
                        <el-input v-model="form.content" style="height: 70px;" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="addSystems()">发布</el-button>
            </el-dialog>
            <el-pagination layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page.sync="currentPage">
            </el-pagination>
        </div>
    </div>
</template>
  
<script>
export default {
    name: "six",
    data() {
        return {
            pageSize: 10, // 每页显示数量
            currentPage: 1, // 当前页数
            total: 50, // 总数据量
            systems: [],
            systemVisible: false,
            form: {
                content: '',
            },
        };
    },
    methods: {
        //获取数据信息
        getsystemdata() {
            fetch(`http://localhost:3000/systems`, {
                method: 'GET'
            })
                .then(res => res.text())
                .then(res => {
                    console.log(res);
                    this.systems = JSON.parse(res)
                });
        },
        handleSystem(system_id) {
            fetch(`http://localhost:3000/handleSystem/${system_id}`, {
                method: 'delete'
            }).then(() => {
                this.getsystemdata();
            });
            this.$message.success('移除成功')
            // location.reload();
        },
        addSystem() {
            this.systemVisible = true;
        },
        addSystems() {
            this.systemVisible = false;
            fetch('http://localhost:3000/addSystems', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    content: `${this.form.content}`,
                })
            }).then(() => {
                this.getsystemdata();
            });
            this.form.content = ''
            this.$message.success('发布成功')
            // this.systemVisible = false;
            // location.reload();
        },
    },
    mounted() {
        this.getsystemdata();
        // setInterval(() => {
        //     this.getsystemdata();
        // }, 1000);
    },
};
</script>
<style>
.systemtitle {
    width: '100%';
    height: 60px;
    font-size: 30px;
    font-weight: bold;
    color: black;
    margin-left: 1%;
    margin-top: 5%;
}

.addsystem {
    margin-left: 60%;
}
</style>